{% extends 'books/base.html' %}
{% load humanize %}
{% block content %}

{#    Поиск    #}
<form method="get">
    <div class="row">
        <div class="col-md-8 mb-3">
            <label for="search">Поиск</label>
            <input name="search_text" type="text" id="search" class="form-control" aria-describedby="passwordHelpBlock"
            value="{% if form.search_text %}{{ form.search_text }}{% endif %}">
            <small id="passwordHelpBlock" class="form-text text-muted">
              Введите строку для поиска названия книги, её описания или автора
            </small>
        </div>

        <div class="col-md-3 mb-5">
            <label for="year">Год</label>
            <input name="search_year" type="text" id="year" class="form-control" aria-describedby="passwordHelpBlock"
            value="{% if form.search_year %}{{ form.search_year }}{% endif %}">
            <small id="passwordHelpBlock" class="form-text text-muted">
              Введите год, чтобы отфильтровать запрос
            </small>
        </div>
        <div class="col-md-1 mb-5">
              <button class="btn btn-primary" type="submit" style="margin-top: 24px">Поиск</button>
        </div>
    </div>
</form>


{% include "pagination.html" with p=paginator %}


{#    КНИГИ    #}
{% if books %}

<div class="align-items-stretch row row-cols-1 row-cols-lg-4">
{% for book in books %}
    <div class="col py-3">
        <div class="card card-cover h-100 overflow-hidden rounded-4 shadow-lg"

             {# Цвет рамки книги #}
            {% if book.statistic.read %}style="border: 2px solid blueviolet;"
            {% elif book.statistic.favorite %}style="border: 2px solid #ff7676;"{% endif %}>

            {# Метки книги #}
            {% if book.statistic.read %}
                <span style="position: absolute;right: 10px;top: 10px;background-color: blueviolet;cursor: default;"
                      class="badge">
                Прочитано
                </span>
            {% endif %}

            {% if book.statistic.favorite %}
                <div style="padding: 9px; position: absolute; left: 6px; top: 6px; cursor: default; background-color: white; border-radius: 100%;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ff7676" class="bi bi-heart-fill" viewBox="0 0 16 16" style="position: relative;top: 2px;">
                  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
                </svg>
                </div>
            {% endif %}

            <a href="{% url 'book-about' book.id %}">
                <img style="object-fit: cover; object-position: right; min-height: 430px" height="100%"
                     src="/media/books/{{ book.id }}/preview.png" class="card-img-top" alt="img:'{{ book.title }}'">
            </a>

            {# Данные книги #}
            <ul class="list-group list-group-flush">
            <li class="list-group-item list-group-item-secondary">{{ book.title }}</li>
                {% if book.author %}
            <li class="list-group-item">{{ book.author }}</li>
                {% endif %}
                {% if book.year %}
            <li class="list-group-item">{{ book.year }} г.</li>
                {% endif %}
            </ul>

        </div>
    </div>
{% endfor %}

{% else %}
    <h1 class="text-center">По вашему запросу книги не найдены</h1>
{% endif %}

</div>


{% include "pagination.html" with p=paginator %}

{% endblock %}
